<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <!-- 视图层 -->
      <div id="box"></div>
      <!-- 视图层 -->
      <input type="text" v-model="sex" />
      <div id="content">{{sex}}</div>
      <!-- checkbox v-model -->
      <input type="checkbox" v-model="flag" />
      <div v-if="flag">显示隐藏</div>
      <!-- 复选框 -->
      <select v-model="selected">
        <option value="请选择">请选择</option>
        <option value="a">A</option>
        <option value="b">B</option>
        <option value="c">C</option>
      </select>
      <span>Selected: {{ selected }}</span>
    </div>
    <script src="vue.js"></script>
    <script>
      // v-model  数据双向绑定  底层原理Object.defineProprety()实现
      //v-model  为表单元素提供 input  selelt  textarea
      // 体现vue的
      // mvvm模式  m---数据模型层      v--view--视图层 vm--viewModel 视图模型层
      var vm = new Vue({
        el: '#app',
        data() {
          return {
            //数据模型层
            sex: '男女',
            flag: true,
            selected: ''
          }
        }
      })
      //mvc 模式   m--model数据模型层  v--view 视图层 c- controller 控制层
      var msg = '你好' //数据模型层
      // 控制层
      var box = document.getElementById('box')
      box.innerHTML = msg
      msg = '你不好'
      box.innerHTML = msg
    </script>
  </body>
</html>
